import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Animated,
    Platform,
    TouchableNativeFeedback,
    InteractionManager
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import StorageUser from '../lib/plugins/StorageUser';
import NavigationBar from '../components/NavigationBar';
import shopService from '../lib/services/shopService';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');
export default class DrawRecord extends Component{
    constructor(props) {
        super(props);
        this.list = [];
        this.token = '';
        this.userId = '';
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource:ds.cloneWithRows(this.list),
            pageNum:1,
        };
        
    }
    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.token){
                    $this.token = data.token;
                }
                if(data.userId){
                    $this.userId = data.userId;
                }
                InteractionManager.runAfterInteractions(() => {
                    $this.getRecordList();
                });            
            }).catch(err=> {
                console.log(err)
            });
    }

    renderListItem(rowData,sectionID,rowId){
        var arr = ['','审核中','提现成功','提现失败'];
        return(
            <View>
                <RecordItem staturs={arr[rowData.status]} date={rowData.create_time} money={rowData.money}/>
            </View>
        )
    }

    
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'提现记录'} 
                    leftPress={()=>this.goBack()}/>
                <ListView
                    dataSource={this.state.dataSource}
                    enableEmptySections={true}
                    renderRow={(rowData,sectionID,rowId) => this.renderListItem(rowData,sectionID,rowId)}
                    onEndReached={()=>this.getRecordList()}
                    onEndReachedThreshold={1}/>
                
            </View>
        )
    }
    // 返回按钮
    goBack(){
        this.props.navigation.goBack();
    }
    // 获取记录列表
    getRecordList(){
        var pageNum = this.state.pageNum;
        var $this = this;
        shopService.myApplyLists(async function(data){
            console.log(data);
            if(data.code==10000){
                $this.list = $this.list.concat(data.data.pagedata);
                pageNum++;
                $this.setState({
                    pageNum:pageNum,
                    dataSource:$this.state.dataSource.cloneWithRows($this.list)
                })
            }
        },pageNum,$this.userId,$this.token)
    }



}

class RecordItem extends Component{
    render(){
        var select = this.props.select;
        return(
            <View style={styles.itemBox}>
                <View style={styles.leftBox}>
                    <View style={styles.titleBox}>
                        <Text style={{color:'#333',fontSize:16}}>提现</Text>
                        <Text style={{color:'#e4393c',fontSize:16,marginLeft:10}}>{'（'+this.props.staturs+'）'}</Text>
                    </View>
                    <Text style={{fontSize:14}}>{this.props.date}</Text>
                </View>
                <View style={styles.moneyBox}>
                    <Text style={{color:'#e4393c',fontSize:16}}>{'-'+this.props.money}</Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    },
    itemBox:{
        flexDirection:'row',
        height:60,
        alignItems:'center',
        paddingLeft:20,
        backgroundColor:'#fff',
        borderBottomWidth:1,
        borderBottomColor:'#ccc'
    },
    leftBox:{
        flex:1,
    },
    moneyBox:{
        marginRight:20
    },
    titleBox:{
        flexDirection:'row',
    }

});